<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logo测试 - 清除缓存版</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            margin: 0;
            font-family: Arial, sans-serif;
            flex-direction: column;
            gap: 40px;
        }
        .logo-container {
            text-align: center;
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .preview-title {
            margin-bottom: 20px;
            color: #303133;
        }
        .logo-preview {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .logo-preview img {
            border-radius: 8px;
            height: 120px;
            width: 120px;
        }
        .logo-info {
            margin-top: 20px;
            color: #606266;
            font-size: 14px;
        }
        .steps-info {
            background-color: #f5f7fa;
            padding: 20px;
            border-radius: 8px;
            max-width: 600px;
            text-align: left;
            border-left: 4px solid #409eff;
        }
        .steps-info h4 {
            margin-top: 0;
            color: #409eff;
        }
        .steps-info ul {
            margin-bottom: 0;
        }
        .steps-info li {
            margin-bottom: 10px;
        }
        .info-highlight {
            color: #409eff;
            font-weight: bold;
        }
    </style>
    <script>
        // 使用JavaScript动态添加时间戳参数，确保每次加载最新的logo
        document.addEventListener('DOMContentLoaded', function() {
            const timestamp = new Date().getTime();
            const logoImg = document.getElementById('test-logo');
            logoImg.src = `/logo.svg?t=${timestamp}`;
            
            // 显示当前时间戳，证明是动态加载
            document.getElementById('timestamp-info').textContent = `当前加载时间戳: ${timestamp}`;
        });
    </script>
</head>
<body>
    <div class="logo-container">
        <h2 class="preview-title">Logo测试 - 动态加载版</h2>
        <div class="logo-preview">
            <img id="test-logo" alt="最新Logo" />
        </div>
        <p id="timestamp-info" class="logo-info">正在加载最新Logo...</p>
    </div>
    
    <div class="steps-info">
        <h4>为什么您可能看不到变化？</h4>
        <ul>
            <li>浏览器缓存是最常见的原因，本页面已使用JavaScript添加时间戳参数，强制浏览器加载最新文件</li>
            <li>本页面显示的是 <span class="info-highlight">最简洁的logo设计</span>：蓝色圆形背景 + 白色中心圆点</li>
            <li>如果仍然看不到变化，可能需要：</li>
            <ul>
                <li>关闭所有浏览器窗口后重新打开</li>
                <li>清除浏览器的所有缓存数据</li>
                <li>使用另一个浏览器测试</li>
            </ul>
        </ul>
        <p>我们已对logo进行了进一步优化升级：</p>
            <ul>
                <li>使用了更精致的蓝色彩谱渐变（#3b82f6到#60a5fa），调整了渐变角度使效果更自然</li>
                <li>添加了轻微的阴影效果，增强logo的立体感和层次感</li>
                <li>中心圆点半径从12优化为11，不透明度提高到0.98，使视觉更明亮</li>
                <li>增加了两个不同位置的高光点（左上角主高光和右下角次要高光），创造更自然的光影效果</li>
                <li>添加了细微的白色光晕效果，增强整体视觉层次</li>
                <li>保持了极简设计风格的同时，使logo看起来更精致、专业</li>
            </ul>
            <p>请尝试上述方法查看优化后的logo效果。</p>
    </div>
</body>
</html>